<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bus总线/发布订阅模式/观察者模式</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <child content="zhang"></child>
        <div>
            <son content="xuan"></son>
            <son content="shuai"></son>
        </div>
        <child content="jia"></child>
    </div>
    <script>
        //给Vue对象的prototype绑定一个bus属性，那么使用Vue创建的实例也都会有一个bus属性，都指向同一个vue实例，通过bus可以监听change事件
        Vue.prototype.bus = new Vue();

        Vue.component('child', {
            data: function(){
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: {
                  type: String
                }
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function () {
                    this.bus.$emit('change1', this.selfContent);//因为bus为vue实例，所以bus上会拥有$emit方法，通过此方法可以触发自定义事件
                }
            },
            mounted: function () {//通过生命周期勾子，在挂载时监听change事件
                let _this = this;
                this.bus.$on('change1', function (msg) {
                    _this.selfContent = msg;
                })
            }
        })
        Vue.component('son', {
            data: function(){
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: {
                    type: String
                }
            },
            template: '<div @click="handleSonClick">{{selfContent}}</div>',
            methods: {
                handleSonClick: function () {
                    this.bus.$emit('change', this.selfContent);//因为bus为vue实例，所以bus上会拥有$emit方法，通过此方法可以触发自定义事件
                }
            },
            mounted: function () {//通过生命周期勾子，在挂载时监听change事件
                let _this = this;
                this.bus.$on('change', function (msg) {
                    _this.selfContent = msg;
                })
            }
        })

        let vm = new Vue({
            el:"#root"
        })
    </script>
</body>
</html>
